<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>WebService界面 </title>
  
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" /> 
	<link rel="stylesheet" href="${pageContext.request.contextPath}/css/dataTables.bootstrap.css" /> 
	<script src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/jquery.dataTables.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/dataTables.bootstrap.js"></script>
	<script src="${pageContext.request.contextPath}/js/handlebars-v3.0.1.js"></script>
	<script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker.min.js"></script>
	<script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<body>
   <nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid" style="width:808px;"> 
        <div class="navbar-header"> 
            <a class="navbar-brand" href="#">WebService管理平台</a> 
        </div> 
         <ul class="nav navbar-nav">
            <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                  日志管理 <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">添加日志</a></li>
                    <li><a href="#">日志查询</a></li>
                </ul>
            </li>
            <li class="active">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                 任务管理 <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="${pageContext.request.contextPath}/task/getNewTask.do">查询修改任务</a></li>
                    <li><a href="${pageContext.request.contextPath}/task/manager.do">任务管理</a></li>
                    <li><a href="${pageContext.request.contextPath}/jsp/corn.jsp">corn表达式</a></li>
                </ul>
            </li>
             <li>
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                               配置文件管理 <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="${pageContext.request.contextPath}/properties/manager.do">配置文件管理</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">jmeter</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">Jasper Report</a></li>
                    <li class="divider"></li>
                    <li><a href="#">分离的链接</a></li>
                    <li class="divider"></li>
                    <li><a href="#">另一个分离的链接</a></li>
                </ul>
            </li>
        </ul>
         <ul class="nav navbar-nav navbar-right"> 
            <c:if test="${empty sessionScope.mainUser}">
            <li><a href="${pageContext.request.contextPath}/login/login.do">登录</a></li> 
            </c:if>
            <c:if test="${not empty sessionScope.mainUser}">
            <li><a href="${pageContext.request.contextPath}/login/out.do">退出</a></li> 
            </c:if>
        </ul> 
    </div> 
</nav>
 <div class="container-fluid">
	 <div class="container">
	    <table id="example" class="table table-striped table-bordered">
	        <thead>
	            <tr>
	                 <th></th>
	                  <th>任务类名字</th>
	                  <th>任务注解名字</th>
	                  <th>任务的类路径</th>
	                  <th>CORN表达式</th>
	                  <th>创建时间</th>
	                  <th>备注</th>
	                  <th>状态0 默认 1:执行 2:暂停</th>
	                  <th>自增长列</th>
	                 <th>操作</th>
	            </tr>
	        </thead>
	    </table>
	</div>
	<!-- Button trigger modal -->
	
	
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
	                        aria-hidden="true">&times;</span></button>
	                <h4 class="modal-title" id="myModalLabel">新增</h4>
	            </div>
	            <div class="modal-body">
	                  <div class="form-group">
	                    <input type="text" class="form-control" id="quartz_name" name="quartz_name"  placeholder="任务类名字">
	                  </div>
	                  <div class="form-group">
	                    <input type="text" class="form-control" id="quartz_ano_name" name="quartz_ano_name"  placeholder="任务注解名字">
	                  </div>
	                  <div class="form-group">
	                    <input type="text" class="form-control" id="quartz_class_path" name="quartz_class_path"  placeholder="任务的类路径">
	                  </div>
	                  <div class="form-group">
	                    <input type="text" class="form-control" id="quartz_corn" name="quartz_corn"  placeholder="CORN表达式">
	                  </div>
	                  <div class="form-group">
	                    <input type="text" class="form-control" id="quartz_create_time" name="quartz_create_time"  placeholder="创建时间">
	                  </div>
	                  <div class="form-group">
	                    <input type="text" class="form-control" id="quartz_abs" name="quartz_abs"  placeholder="备注">
	                  </div>
	                  <div class="form-group">
	                    <input type="text" class="form-control" id="quartz_type" name="quartz_type"  placeholder="状态0 默认 1:执行 2:暂停">
	                  </div>
	                  <div class="form-group">
	                    <input type="text" class="form-control" id="quartz_id" name="quartz_id" readonly="readonly" placeholder="自增长列">
	                  </div>
	            </div>
	            <div class="modal-footer">
	                <!-- 
	                <button type="button" class="btn btn-info" id="initData">添加模拟数据</button>
	                 -->
	                <button type="button" class="btn btn-default" data-dismiss="modal" id="close">关闭</button>
	                <button type="button" class="btn btn-primary" id="save">保存</button>
	                <button type="button" class="btn btn-primary" id="add"  style="display:none">添加</button>
	            </div>
	        </div>
	    </div>
	</div>
 </div>	    
</body>
<script id="tpl" type="text/x-handlebars-template">
    {{#each func}}
    <button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>
    {{/each}}
</script>
<script type="text/javascript">
var table;
$(function () {

    $('#start_date').datetimepicker();

    var tpl = $("#tpl").html();
    //预编译模板
    var template = Handlebars.compile(tpl);

    table = $('#example').DataTable({
        ajax: {
            url: "${pageContext.request.contextPath}/quartzTask/queryQuartzTaskList.do",
            type: "post"
        },
        "order": [[1, 'asc']],// dt默认是第一列升序排列 这里第一列为序号列，所以设置为不排序，并把默认的排序列设置到后面
        "serverSide": true,
        "columns": [
            {"data": null}, //因为要加行号，所以要多一列，不然会把第一列覆盖
             {"data": "quartz_name"},
             {"data": "quartz_ano_name"},
             {"data": "quartz_class_path"},
             {"data": "quartz_corn"},
             {"data": "quartz_create_time"},
             {"data": "quartz_abs"},
             {"data": "quartz_type"},
             {"data": "quartz_id"},
            {"data": null}
        ],
        "columnDefs": [
            {
                "searchable": false,
                "orderable": false,
                "targets": [0.-1]
            },
            {
                "targets":9,
                "render": function (a, b, c, d) {
                   var context =null;
                     context =
                     {
                        func: [
                            {"name": "修改", "fn": "edit(\'" + c.quartz_name+ "\',\'"+c.quartz_ano_name+ "\',\'"+c.quartz_class_path+ "\',\'"+c.quartz_corn+ "\',\'"+c.quartz_create_time+ "\',\'"+c.quartz_abs+ "\',\'"+c.quartz_type+ "\',\'"+c.quartz_id + "\')", "type": "danger"},
                            //{"name": "修改", "fn": "edit(\'" + c.quartz_id + "\',\'" + c.quartz_name + "\',\'" + c.quartz_ano_name + "\',\'" + c.quartz_class_path + "\',\'" + c.quartz_corn + "\',\'" + c.quartz_abs + "\')", "type": "danger"},
                            {"name": "删除", "fn": "del(\'" + c.quartz_id + "\',\'0\')", "type": "danger"}
                        ]
                     };
                    var html = template(context);
                    return html;
                }
            }

        ],
        "language": {
            "lengthMenu": "每页_MENU_ 条记录",
            "zeroRecords": "没有找到记录",
            "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
            "infoEmpty": "无记录",
            "search": "搜索：",
            "infoFiltered": "(从 _MAX_ 条记录过滤)",
            "paginate": {
                "previous": "上一页",
                "next": "下一页"
            }
        },
        "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-4'><'col-xs-6'f>r>" +
                "t" +
                "<'row'<'col-xs-6'i><'col-xs-6'p>>",
        "initComplete": function () {
            //$("#mytool").append('<button id="datainit" type="button" class="btn btn-primary btn-sm">增加基础数据</button>&nbsp');
            $("#mytool").append('<button id="addMsg" type="button" class="btn btn-primary btn-sm">添加</button>');
            //$("#datainit").on("click", initData);
            $("#addMsg").on("click",addMsg);
        }

    });

    //添加序号
    //不管是排序，还是分页，还是搜索最后都会重画，这里监听draw事件即可
    table.on('draw.dt',function() {
                table.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function(cell, i) {
                    //i 从0开始，所以这里先加1
                    i = i+1;
                    //服务器模式下获取分页信息
                    var page = table.page.info();
                    //当前第几页，从0开始
                    var pageno = page.page;
                    //每页数据
                    var length = page.length;
                    //行号等于 页数*每页数据长度+行号
                    var columnIndex = (i+pageno*length);
                    cell.innerHTML = columnIndex;
                });
            }).draw();

    $("#add").click(editOrAdd);
    $("#save").click(editOrAdd);
    $("#close").click(clear);
});

/**
 * 清除
 */
function clear() {
     $("#quartz_name").val("");
     $("#quartz_ano_name").val("");
     $("#quartz_class_path").val("");
     $("#quartz_corn").val("");
     $("#quartz_create_time").val("");
     $("#quartz_abs").val("");
     $("#quartz_type").val("");
     $("#quartz_id").val("");
    $("#add").hide();
	$("#save").show();
    $("#myModalLabel").text("新增");
}

/**
 *编辑方法
 **/
function edit(quartz_name,quartz_ano_name,quartz_class_path,quartz_corn,quartz_create_time,quartz_abs,quartz_type,quartz_id) {
    console.log(name);
    editFlag = true;
    $("#myModalLabel").text("修改");
     $("#quartz_name").val(quartz_name);
     $("#quartz_ano_name").val(quartz_ano_name);
     $("#quartz_class_path").val(quartz_class_path);
     $("#quartz_corn").val(quartz_corn);
     $("#quartz_create_time").val(quartz_create_time);
     $("#quartz_abs").val(quartz_abs);
     $("#quartz_type").val(quartz_type);
     $("#quartz_id").val(quartz_id);
    $("#myModal").modal("show");
}

/**
 * 添加数据
 */
function addMsg(){
	$("#add").show();
	$("#save").hide();
	$("#quartz_id").val("*");
	$("#myModalLabel").text("新增");
	$("#myModal").modal("show");
}

function editOrAdd() {
    $.ajax({
        url:"${pageContext.request.contextPath}/quartzTask/udateOrAddQuartzTask.do",
        type: "post",
        dataType:'json',
 	    contentType : 'application/json; charset=UTF-8',
        data:JSON.stringify({
             "quartz_name":$("#quartz_name").val(),
             "quartz_ano_name":$("#quartz_ano_name").val(),
             "quartz_class_path":$("#quartz_class_path").val(),
             "quartz_corn":$("#quartz_corn").val(),
             "quartz_create_time":$("#quartz_create_time").val(),
             "quartz_abs":$("#quartz_abs").val(),
             "quartz_type":$("#quartz_type").val(),
            "quartz_id":$("#quartz_id").val()
        }),
        success: function (data) {
            table.ajax.reload();
            $("#myModal").modal("hide");
            clear();
            console.log("结果" + data.result);
        }
    });
}


/**
 * 删除数据
 * @param name
 */
function del(quartz_id) {
	
	var url="${pageContext.request.contextPath}/quartzTask/delQuartzTask.do";
    $.ajax({
        url:url,
        type: "post",
        dataType:'json',
 	    contentType : 'application/json; charset=UTF-8',
        data: JSON.stringify({
            "quartz_id": quartz_id
        })
        , success: function (data) {
            table.ajax.reload();
            console.log("结果" + data.result);
        }
    });
}
</script>
</html>